<template>
  <div class="blog_history" v-infinite-scroll="load" style="overflow: auto">
    <div class="blog_history_crumbs">
      <span @click="toaddress">孵化社区&nbsp;</span>/
      <span>历史动态</span>
    </div>

    <div v-for="item in blog_list" :key="item.id" class="own_blog">
      <span class="own_blog_title" @click="To_Detail_page(item.id)">{{
        item.title
      }}</span>
      <div class="own_blog_connent">
        <img
          class="own_blog_img"
          @click="To_Detail_page(item.id)"
          :src="item.coverPicture"
          alt=""
        />
        <div class="own_blog_right">
          <span
            class="own_blog_description"
            style="cursor: pointer"
            @click="To_Detail_page(item.id)"
            >{{ item.description }}</span
          >
          <div class="own_blog_function">
            <span
              class="own_blog_praise el-icon-thumb"
              :class="{ praise: item.hasLike }"
            >
              {{ item.praiseNumber }}</span
            >
            <span class="own_blog_comment el-icon-chat-dot-round">
              {{ item.commentNumber }}</span
            >
            <span
              class="own_blog_delete el-icon-delete"
              @click="delete_own_blog(item.id)"
              >删除</span
            >
          </div>
        </div>
      </div>
    </div>
    <p v-if="page > page_count" style="margin: 0px auto">没有更多了</p>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      page: 1,
      // myblogs: "",
      page_count: 12,
      blog_list: [],
    };
  },
  methods: {
    toaddress() {
      this.$router.push("/home/Team/Team_Incubation_community");
    },
    load() {
      this.page += 1;
      this.get_owner_blog();
    },
    //到详细页面
    To_Detail_page(id) {
      window.sessionStorage.setItem("blog_name", "历史动态");
      window.sessionStorage.setItem("article_id", id);
      this.$router.push("/home/Team/Team_Incubation_community/Blog_details");
    },
    async get_owner_blog() {
      console.log("=---------");
      console.log(this.page);
      console.log(this.page_count);
      console.log("=---------");
      if (this.page <= this.page_count) {
        const self = this;
        const { data: res } = await this.$http({
          headers: { "Content-Type": "application/json;charset=UTF-8" },
          method: "get",
          url: "/api/team/article/getArticleByUserId",
          params: {
            page: self.page,
            pageSize: 6,
          },
        });
        this.page_count = res.msg.pages;
        this.blog_list = this.blog_list.concat(res.msg.records);
      }
    },
    async delete_own_blog(id) {
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "delete",
        url: "/api/team/article/deleteArticle",
        params: {
          articleId: id,
        },
      });
      if (res.code != 200) {
        this.$message.error("删除失败");
        return;
      }
      this.$message.success(res.msg);
      this.page = 0;
      this.blog_list = [];
      this.get_owner_blog();
    },
  },
  created() {
    this.$emit("name", "/home/Team/Team_Incubation_community");
    this.get_owner_blog();
  },
};
</script>

<style lang="less">
.blog_history {
  display: flex;
  // background-color: rgb(201, 26, 26);
  width: 100%;
  height: 99%;
  flex-direction: column;
  overflow: auto;

  .blog_history_crumbs {
    display: flex;
    margin: 10px;
    margin-left: 20px;

    span:nth-child(1) {
      color: rgb(127, 127, 127);
      cursor: pointer;
    }
    span:nth-child(2) {
      color: rgb(0, 110, 255);
      cursor: pointer;
    }
    span:hover {
      color: rgb(0, 110, 255);
    }
  }
}

.own_blog {
  margin: 10px 0 0 20px;
  display: flex;
  flex-direction: column;
  width: 98%;
  height: 20%;
  justify-content: flex-start;
  border-bottom: 1px solid rgb(214, 214, 214);
  //  background-color: rgb(202, 22, 22);
  .own_blog_title {
    font-size: 25px;
    // height: 10%;
    // display: flex;
    cursor: pointer;
  }
  .own_blog_connent {
    display: flex;
    margin-top: 10px;
    height: 80%;
    width: 100%;
    .own_blog_img {
      height: 80%;
      cursor: pointer;
    }

    .own_blog_right {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      height: 80%;
      justify-content: space-between;
      .own_blog_function {
        display: flex;
        flex-direction: row;
        span {
          margin-right: 20px;
        }
        .own_blog_comment .own_blog_praise {
          font-size: 10px;
        }
        .own_blog_delete {
          // color: blue;
          color: rgb(0, 110, 255);
          cursor: pointer;
        }
      }
    }
  }
}

.blog_history::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #fff;
}
.blog_history::-webkit-scrollbar {
  width: 6px;
}
.blog_history:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.praise {
  color: red;
}
</style>